import React from 'react';
import {View, Text as RNText, ART, Dimensions, Animated,TouchableOpacity} from 'react-native';
import {AnimatedLine} from "./Line";
import {BoomCircle} from "./Boom";

const {width, height} = Dimensions.get('window')

const {Surface, Shape, Path, ClippingRectangle, Pattern, LinearGradient, RadialGradient, Group, Text} = ART;


export default class FireworksDemo extends React.Component {

  state = {
    upHeight: new Animated.Value(0),
    bLong1: new Animated.Value(0),
    bLong2: new Animated.Value(0),
    bLong3: new Animated.Value(0),
  }


  boomTime = 300;

  endHeihgt = 100;

  componentDidMount() {
    this.resetAnim(3);
  }


  render() {
    return (
      <View>
        <RNText>烟花</RNText>
        <RNText>烟花</RNText>
        <RNText>烟花</RNText>
        <RNText>烟花</RNText>
        <RNText>烟花</RNText>
        <RNText>烟花</RNText>
        <RNText>烟花</RNText>
        <RNText>烟花</RNText>
        <RNText>烟花</RNText>
        <RNText>烟花</RNText>
        <RNText>烟花</RNText>
        <RNText>烟花</RNText>
        <RNText>烟花</RNText>
        <RNText>烟花</RNText>
        <RNText>烟花</RNText>
        <RNText>烟花</RNText>
        <RNText>烟花</RNText>
        <RNText>烟花</RNText>
        <Surface
          opacity={0}
          width={width}
          height={width}
          style={{backgroundColor: '#00000000', position: 'absolute'}}>
          <AnimatedLine upHeight={this.state.upHeight}/>
          <BoomCircle bLong={this.state.bLong1} distance={10}/>
          <BoomCircle bLong={this.state.bLong2} distance={15}/>
          <BoomCircle bLong={this.state.bLong3} distance={20}/>
        </Surface>

        <TouchableOpacity
          onPress={()=>{
            this.setState({
              upHeight: new Animated.Value(0),
              bLong1: new Animated.Value(0),
              bLong2: new Animated.Value(0),
              bLong3: new Animated.Value(0),
            },()=>this.resetAnim(3));

          }}
          style={{ position:'absolute',top:30,left:50,width:25, backgroundColor:'red'}}>
          <RNText>fire</RNText>
        </TouchableOpacity>


      </View>
    )
  }

  resetAnim = (time) => {
    // Animated.parallel([
    Animated.timing(
      this.state.upHeight,
      {
        toValue: this.endHeihgt,
        duration: time * 1000,
      },
    ).start(() => {
      console.log('结束动画')
    });
    Animated.sequence([
      Animated.timing(
        this.state.bLong1,
        {
          toValue: 10,
          duration: time * this.boomTime,
        },
      ),
      Animated.timing(
        this.state.bLong2,
        {
          toValue: 10,
          duration: time * this.boomTime,
        },
      ),
      Animated.timing(
        this.state.bLong3,
        {
          toValue: 10,
          duration: time * this.boomTime,
        },
      ),
    ]).start();

    // ])

  }
}
